<template>
  <div>
    <Table 
      :columns="columns" 
      :data="page.content" 
      :loading="pending" 
      @on-row-dblclick="value => $emit('onDoubleClick', value)" 
      stripe 
      border 
    >
    </Table>
    <Page 
      v-if="!pending && page.totalElements > page.size" 
      style="margin-top: 16px;text-align: center" 
      :current="page.number + 1" 
      :total="page.totalElements || 0" 
      :page-size="page.size" 
      :page-size-opts="[1,5,9,15,20,25,30,35,40]" 
      show-total 
      show-sizer 
      show-elevator 
      @on-change="value => $emit('pageChange', value)" 
      @on-page-size-change="value => $emit('pageSizeChange', value)" 
      transfer 
    ></Page>
  </div>
</template>

<script lang="tsx">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class ComponentTable extends Vue {
  @Prop(Array) columns!: any[]
  @Prop(Object) page!: any
  @Prop(Boolean) pending!: boolean
  @Prop(Boolean) stripe!: boolean
}
</script>

